<template>
  <div class="repetition-rate-page">
    <Divider />
    <h3 class="repetition-rate-title">
      <span>重复率</span>
      <span class="rate">{{ info.repetitionRate }}</span>%
    </h3>
    <Row>
      <Col span="4" v-for="(it,i) in companyList" :key="i">
        <h4>{{ it.label }}</h4>
        <div class="data-box">
          <span class="num">{{ info[it.key] }}</span>
          <span class="grey">条</span>
          <BtnText type="primary" @BtnClick="onView(it.repeatType)">查看详情</BtnText>
        </div>
      </Col>
    </Row>
    <RepetitionRateModal v-model="modalValue" :info="info" :type="repeatType" />
  </div>
</template>

<script>
import RepetitionRateModal from './repetitionRateModal.vue'

export default {
  name: 'repetitionRate',
  components: { RepetitionRateModal },
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      modalValue: false,
      companyList: [
        { label: '施工方单位', key: 'constructionRepeatCount', repeatType: 'Construction' },
        { label: '业主方单位', key: 'ownerRepeatCount', repeatType: 'Owner' },
        { label: '项目名称', key: 'nameRepeatCount', repeatType: 'ProjectName' },
        { label: '项目位置', key: 'placeRepeatCount', repeatType: 'ProjectAddress' },
      ],
      repeatType: 'Construction',
    }
  },
  methods: {
    onView (repeatType) {
      this.repeatType = repeatType
      this.modalValue = true
    },
    goToDetails (row) { },

  }
}
</script>

<style lang='less' scoped>
.mb-20 {
  margin-bottom: 20px;
}

.repetition-rate-title {
  margin: -10px 0 10px;
  .rate {
    padding: 0 10px;
    margin-bottom: 20px;
    font-size: 30px;
    color: #2d8cf0;
  }
}

.data-box {
  margin-top: 5px;
  .num {
    margin-right: 5px;
    font-size: 18px;
    font-weight: 500;
  }

  .grey {
    color: #7b8591;
    margin-right: 10px;
  }
}

.modal-head {
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  &.on {
    background-color: #e5f1ff;
  }
}
</style>
